<template>
  <div class="app">
    <div>
      <div class="search" @click="$router.push('/movieSearch')">
        <p>釜山行，夏有乔木仰望天堂</p>
      </div>
      <div style="margin-top: 20px">
        <more>
          <span slot="icon">Top250</span>
          <span slot="more" @click="handleMore(arr[0])">更多</span>
        </more>
        <div class="container">
          <item
            v-for="item in hot.slice(0, 3)"
            :key="item.index"
            :item="item"
          ></item>
        </div>
      </div>
      <div style="margin-top: 20px">
        <more>
          <span slot="icon">正在热映</span>
          <span slot="more" @click="handleMore(arr[1])">更多</span>
        </more>
        <div class="container">
          <item
            v-for="item in inTheaters.slice(0, 3)"
            :key="item.index"
            :item="item"
          ></item>
        </div>
      </div>
      <div style="margin-top: 20px">
        <more>
          <span slot="icon">即将上映</span>
          <span slot="more" @click="handleMore(arr[2])">更多</span>
        </more>
        <div class="container">
          <item
            v-for="item in comingSoon.slice(0, 3)"
            :key="item.index"
            :item="item"
          ></item>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import item from "./components";
import more from "./components/more.vue";
export default {
  data() {
    return {
      hot: [],
      inTheaters: [],
      comingSoon: [],
      arr: ["top250", "inTheaters", "comingSoon"],
    };
  },
  components: { item, more },
  mounted() {
    this.$http("http://47.108.197.28:4000/api/movie/top250").then((res) => {
      this.hot = res.data.res;
      this.hot.forEach((item) => {
        item.star = this.handleNum(item.rating);
      });
    });
    this.$http("http://47.108.197.28:4000/api/movie/inTheaters").then((res) => {
      this.inTheaters = res.data.res;
      this.inTheaters.forEach((item) => {
        item.star = this.handleNum(item.raiting);
      });
    });
    this.$http("http://47.108.197.28:4000/api/movie/comingSoon").then((res) => {
      this.comingSoon = res.data.res;
      this.comingSoon.forEach((item) => {
        item.star = this.handleNum(item.rating);
      });
    });
  },
  methods: {
    handleNum(num) {
      var arr = [];
      for (var i = 0; i < 5; i++) {
        if (num >= 2) {
          arr.push(2);
        } else if (num > 0) {
          arr.push(Number(num.toFixed(1)));
        } else {
          arr.push(0);
        }
        num -= 2;
      }
      return arr;
    },
    handleMore(m) {
      this.$router.push(`/movieMore/${m}`);
    },
  },
};
</script>

<style scoped>
.app {
  width: 10rem;
  overflow: hidden;
  margin: auto;
  padding-bottom: 80px;
  box-sizing: border-box;
  background-color: #f5f5f5;
}
.search {
  width: 10rem;
  cursor: pointer;
  height: 50px;
  border: 1px solid #b0b0b0;
  box-sizing: border-box;
}
.search p {
  text-align: left;
  line-height: 50px;
  padding-left: 20px;
  color: #b0b0b0;
}
.container {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}
</style>